<template>
	<view>
		<!--头部题目类型  答题进度-->
		<view id="top-box" class="cu-bar bg-white solid-bottom">
			<view class="action text-black">
				<text v-if="currentType===1">单选题</text>
				<text v-else-if="currentType===2">多选题</text>
				<text v-else-if="currentType===3">判断题</text>
				<text v-else-if="currentType===4">填空题</text>
				<text v-else-if="currentType===5">简答题</text>
				<text style="margin-left: 10rpx;">({{schedule}})</text>
			</view>
			<view class="action" v-if="examId === null">
				<button class="cu-btn bg-green shadow" @tap="showCardModal" data-target="modalCard">答题卡</button>
			</view>
		</view>
		
		<!--题目区域-->
		<form>
			<swiper :current="subjectIndex" class="swiper-box" @change="SwiperChange" :style="{'height':swiperHeight}">
				<swiper-item v-for="(question,index) in questionsList">
						
						<view class="cu-bar bg-white solid-bottom">
							<view class="action text-black">
								<text class="cuIcon-title text-red"></text>{{question.content}}
							</view>
						</view>
						
						<view>
							<!--单选 判断-->
							<radio-group class="block"  @change="RadioboxChange" v-if="question.type===1||question.type===3">
								<label class="cu-form-group" v-for="option in question.optionList" :key="option.tag">
									<radio :value="option.tag" :checked="question.userAnswer.indexOf(option.tag) > -1?true:false" :disabled="examId !== null" :class="examId !== null ? 'hidde' : ''"></radio>
									<view class="title text-black">
										{{option.tag}}.
									</view> 
									<view class="margin-left-sm">
										<rich-text :nodes="option.option"/>
									</view>
								</label>
							</radio-group>
								
							<!--多选-->
							<checkbox-group class="block"  @change="CheckboxChange" v-else-if="question.type===2">
								<label class="cu-form-group" v-for="option in question.optionList" :key="option.tag">
									<checkbox :value="option.tag" :class="question.userAnswer.indexOf(option.tag) > -1?'checked':''" :checked="question.userAnswer.indexOf(option.tag) > -1?true:false" :disabled="examId !== null"></checkbox>
									<view class="title text-black">
										{{option.tag}}.
									</view> 
									<view class="margin-left-sm">
										<rich-text :nodes="option.option"/>
									</view>
								</label>
							</checkbox-group>
							
							<!--填空题-->
							<view v-else-if="question.type===4">
								<view class="cu-form-group solid-bottom">
									<view class="title  text-black">
										答：
									</view>
									<input placeholder="请输入答案" name="input" v-model="question.userAnswer" @blur="textInput" ></input>
								</view>
							</view>
							
							<!--简答题-->
							<view v-else-if="question.type===5">
								<view class="cu-bar cu-bar-title bg-white margin-top">
									<view class="action  text-black">
										答：
									</view>
								</view>
								<view class="cu-form-group solid margin">
									<textarea maxlength="-1"  @blur="textInput" v-model="question.userAnswer" placeholder="请输入答案"></textarea>
								</view>
							</view>
			
						</view>
		
						<view class="margin-top solid-top" v-if="question.isCorrect!=null">
							<view class="cu-bar">
								<view class="action  text-grey">
									<text>正确答案：</text>
									<text class="text-green" style="font-size: 20px;">{{question.answer}}</text>
									
									<text style="margin-left: 20rpx;">你的答案：</text>
									<text :class="question.isCorrect ? 'text-green' : 'text-red'" style="font-size: 20px;">{{question.userAnswer}}</text>
								</view>
							</view>
							<view class="cu-bar cu-bar-title">
								<view class="action  text-grey">
									<text>解析：</text>
								</view>
							</view>
							<view class="text-content padding  text-grey">
								{{question.analysis}}
							</view>
						</view>
						
				</swiper-item>
			</swiper>
		</form>
		
		<!--底部菜单栏-->
		<view id="foot-box" class="cu-bar tabbar bg-white shadow foot">
			<!-- <view class="action" @click="paperCheck">
				<view class="cuIcon-cu-image">
					<text class="lg cuIcon-check text-green" style="font-size: 70rpx;"></text>
				</view>
				<view class="text-green">交卷</view>
			</view> -->
			
			
			<view class="action" @click="MoveSubject(-1)">
				<view class="cuIcon-cu-image">
					<text class="lg cuIcon-back text-gray"></text>
				</view>
				<view class="text-gray">上一题</view>
			</view>
			
			<view class="action" @click="MoveSubject(1)">
				<view class="cuIcon-cu-image">
					<text class="lg text-gray cuIcon-right"></text>
				</view>
				<view class="text-gray">下一题</view>
			</view>
			
			<view class="action" @click="paperCheck" v-if="examId === null">
				<view class="cuIcon-cu-image">
					<text class="lg cuIcon-list text-gray"></text>
				</view>
				<view class="text-gray">交卷</view>
			</view>
			
			
			
			<!-- <view class="action" @tap="showCardModal" data-target="modalCard">
				<view class="cuIcon-cu-image">
					<text class="lg text-gray cuIcon-list"></text>
				</view>
				<view class="text-gray">答题卡</view>
			</view> -->
			
		</view>

		<!--答题卡页面弹窗-->
		<view class="cu-modal" :class="modalCard=='modalCard'?'show':''" @tap="hideCardModal">
			<view class="cu-dialog" @tap.stop>
				<view class="cu-bar solid-bottom">
					<view class="action">
						<text class="cuIcon-title text-red"></text>答题卡
					</view>					
				</view>
				<scroll-view class="padding" :scroll-y="true" style="height: 250px;" >				
					<view class="grid col-5 ">
						<view class="margin-tb-sm text-center" v-for="(question,index) in questionsList" :key="index">
							<button class="cu-btn round" :class="[question.userAnswer.length===0?'line-grey':'bg-red']" @click="AppointedSubject(index)" >{{index+1}}</button>
						</view>
					</view>
				</scroll-view>
				<view class="padding">
					<button type="primary" @click="paperCheck">交卷</button>
				</view>
			</view>
		</view>
		
		<!--试卷提交弹窗-->
		<uni-popup ref="paperDialog" type="dialog">
			<uni-popup-dialog type="warning" cancelText="取消" confirmText="确认" 
				content="你还有题目未完成,确认交卷吗?" @confirm="handPaper"></uni-popup-dialog>
		</uni-popup>
	</view>
	
	
</template>

<script>
	import knowledge from '@/api/modules/knowledge'
	
	export default {
		data() {
			return {
				studySkillsId : null, //技能id
				batchId : null, //技能批次id
				questionsList : [] , //题目列表
				currentType: 0, //当前题型
				subjectIndex: 0,//跳转索引
				autoRadioNext:true,//判断题、单项题，自动移下一题
				swiperHeight: '800px', //题目区域高度
				modalCard: null ,//显示答题卡
				examId : null, //考试回显id
			}
		},
		computed: {
			//答题进度
		    schedule() {
		        return `${this.subjectIndex+1} / ${this.questionsList.length}`;
		    }
		},
		onReady() {
			var tempHeight = 800;
			var _me = this;
			uni.getSystemInfo({
				//获取手机屏幕高度信息，让swiper的高度和手机屏幕一样高                
				success: function(res) {                
					tempHeight = res.windowHeight;
					console.log("屏幕可用高度 " + tempHeight);

					uni.createSelectorQuery().select("#top-box").fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						tempHeight -= data.height;
						console.log("减掉顶部后的高度 " + tempHeight);

						uni.createSelectorQuery().select("#foot-box").fields({
							size: true,
							scrollOffset: true
						}, (data) => {
							tempHeight -= data.height;
							console.log("减掉底部后的高度 " + tempHeight);
							_me.swiperHeight = tempHeight + 'px';
							console.log("滑屏最后高度 " + _me.swiperHeight);
						}).exec();

					}).exec();
				}
			});
		},
		onLoad(options) {
			if("id" in options) {
				this.studySkillsId = options.id;
				knowledge.getExamQuestionsById(options.id).then(res=> {
					this.questionsList = res.data;
					this.currentType = this.questionsList[0].type;
					//添加用户答案字段
					for (var i = 0; i < this.questionsList.length; i++) {		
						this.$set(this.questionsList[i],"userAnswer","");				
					}
					console.log(1111,this.questionsList)
				})
			}
			if("batchId" in options) {
				this.batchId = options.batchId;
			}
			if("examId" in options) {
				this.examId = options.examId;
				knowledge.getExamQuestionsResultByExamId(options.examId).then(res=> {
					this.questionsList = res.data;
					this.currentType = this.questionsList[0].type;
					console.log(2222,this.questionsList)
				})
			}
		},
		methods: {
			paperCheck() { //试卷检查
				this.modalCard = null; //关闭答题卡
				for(var i=0;i<this.questionsList.length;i++) {
					if(this.questionsList[i].userAnswer === "") {
						this.$refs.paperDialog.open();
						return
					}
				}
				this.handPaper();
			},
			handPaper() { //交卷
				console.log(this.questionsList);
			
				let param = {
					userId : uni.getStorageSync("loginId"),
					batchId : this.batchId,
					studyQuestionsVo : this.questionsList
				}
				knowledge.handPaper(param).then(res=> {
					let examId = res.data;
					console.log(res.data);
					uni.redirectTo({
						url : `/pages_duty/common/knowledge/skills/answerResult?examId=${examId}`
					})
				})
			},
			showCardModal: function(e) { //显示答题卡
				this.modalCard = e.currentTarget.dataset.target
			},
			hideCardModal: function(e) { //关闭答题卡
				this.modalCard = null
			},
			SwiperChange: function(e) { //滑动事件
				let index = e.target.current;
				if (index != undefined) {
					this.subjectIndex = index;
					this.currentType = this.questionsList[index].type;
				}	
			},			
			RadioboxChange : function(e) { //单选,判断选中
				//用户答案赋值
				this.questionsList[this.subjectIndex].userAnswer = e.detail.value;
				//自动切换滑块
				if(this.autoRadioNext && this.subjectIndex < this.questionsList.length - 1){
					this.subjectIndex += 1;						
				};
			},
			CheckboxChange: function(e) { //复选选中
				this.questionsList[this.subjectIndex].userAnswer = ""; 
				//用户答案赋值
				var values = e.detail.value;
				var items = this.questionsList[this.subjectIndex].optionList;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].tag == values[j]) {
							this.questionsList[this.subjectIndex].userAnswer += items[i].tag;
							break
						}
					}
				}
			},
			textInput : function(e) { //填空，简答题
				console.log(e.detail.value);
				this.questionsList[this.subjectIndex].userAnswer = e.detail.value;
			},		
			MoveSubject: function(e) { //上一题、下一题
				if (e === -1 && this.subjectIndex != 0) {
					this.subjectIndex -= 1;
				}
				if (e === 1 && this.subjectIndex < this.questionsList.length - 1) {
					this.subjectIndex += 1;
				}
			},
			AppointedSubject: function(e) { //题卡指定
				this.modalCard = null;
				this.subjectIndex = e;									
			}
		}
	}
</script>

<style>
	@import "../../../../components/colorui/main.css";
	@import "../../../../components/colorui/icon.css";
	@import "../../../../components/colorui/animation.css";
	page {
		background-color: #FFFFFF;
	}

	.cu-form-group {
		justify-content: flex-start
	}

	.cu-form-group .title {
		padding-left: 30upx;
		padding-right: 0upx;
	}

	.cu-form-group+.cu-form-group {
		border-top: none;
	}

	.cu-bar-title {
		min-height: 50upx;
	}
	
	.cu-list.menu>.cu-item-error{justify-content: flex-start;}
	
	.hidde {
		display: none;
	}
</style>
